<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020/5/21
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>库存变动</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="员工">
                        <i-select v-model="storeOperVo.operateId" style="width: 110px">
                            <i-option value="">【不限】</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="操作日期:">
                        <row>
                            <col span="12"> <date-picker @on-change="storeOperVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px" type="date" ></date-picker></col>
                            <col span="12"> <date-picker @on-change="storeOperVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="date" ></date-picker></col>
                        </row>
                    </form-item>
                <form-item label="仓库">
                    <i-select v-model="storeOperVo.storeId" style="width: 110px">
                        <i-option value="">【不限】</i-option>
                        <i-Option v-for="item in storeList" :value="item.id" :key="item.id">{{item.sname}}</i-Option>
                    </i-select>
                </form-item>
                <form-item label="商品">
                    <i-select v-model="storeOperVo.goodId" style="width: 110px">
                        <i-option value="">【不限】</i-option>
                        <i-Option v-for="item in goodsList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                    </i-select>
                </form-item>

                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>
    <i-table :columns="columns" :data="pageResult.rows" :height="400" border stripe><%--只要选中现发生变化时就会触发，返回值为selection，已选项--%>
        <template slot-scope="{row}" slot="operateId"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span>{{row.user.username}}</span>
        </template>
        <template slot-scope="{row}" slot="storeId"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span>{{row.store.sname}}</span>
        </template>
        <template slot-scope="{row}" slot="goodId"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span>{{row.goods.name}}</span>
        </template>
        <template slot-scope="{row}" slot="type"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span v-if="row.type==1" >入库</span>
            <span v-if="row.type==2" >出库</span>
            <span v-if="row.type==3" >盘盈</span>
            <span v-if="row.type==4" >盘亏</span>
        </template>
    </i-table>
    <Page :total="pageResult.total"
          :page-size="pageSize"<%--每页条数--%>
    <%--:current.sync="pageNo"    =pageNo=arguments[0];searchUserList();当前页码，支持.sync修饰符,同步
    @on-change="searchUserList"返回改变后的页码,这两行代码相当于下面一行代码--%>
          @on-change="pageNo=arguments[0];search();"
    <%-- @on-change="searchUserList"--%>
          show-sizer<%--是否显示分页，用来改变page-size--%>
          :page-size-opts="[5,10,15]"<%--每页条数切换的配置--%>
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];search();"<%--切换每页数时的回调，返回切换后的每页条数--%>
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                // {type:"selection",width:60,align:"center"},
                {title:"编号",key: "id"},
                {title:"员工",slot: "operateId"},
                {title:"操作日期",key:"operateTime"},
                {title:"仓库",slot:"storeId"},
                {title:"商品",slot: "goodId"},
                {title:"数量",key:"number"},
                {title:"类型",slot:"type"}
            ],
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            userList:[],
            storeList:[],
            goodsList:[],
            storeOperVo:{},
        },

        methods:{
            search(){
                axios.get(`${ctx}/kucun/store/oper/${this.pageNo}/${this.pageSize}`,{params:this.storeOperVo})
                    .then(({data})=>{
                        this.pageResult=data.result;

                    });
            },
          searchUserList(){
                axios.get(`${ctx}/sys/user/sol`)
                    .then(({data})=>{
                        this.userList=data.result;
                    });
            },
          searchStoreList(){
                axios.get(`${ctx}/kucun/store/list`)
                    .then(({data})=>{
                        this.storeList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/sys/goods/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
        },
        mounted(){
            this.search();
            this.searchUserList();
            this.searchStoreList();
            this.searchGoodsList();
        },
    })
</script>
</body>
</html>
